<template>

  <div style="display: none;">
    <el-dialog :title="$t('公告')" class="announcement" v-if="showAll" :visible.sync="showAll" :show-close="false" center>
      <div class="mybody" v-html="notice" v-if="showInd"></div>

      <div class="mybody main" v-if="emaiShowInd" style="text-align: center;margin-top: 10px">
        <div><span>{{ $t("邮箱填写") }}</span></div>
        <el-input resize="none" type="email" :placeholder="$t('请输入邮箱')" v-model="email" style="width: 60%">
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateEmail()">{{ $t("确认") }}</el-button>
      </span>
    </el-dialog>
    <!--    <el-dialog-->
    <!--        title="公告"-->
    <!--        class="announcement"-->
    <!--        v-if="showInd"-->
    <!--        :visible.sync="showInd"-->
    <!--        :show-close="false"-->
    <!--        center>-->
    <!--      <div class="mybody" v-html="notice"></div>-->

    <!--      <span slot="footer" class="dialog-footer">-->

    <!--      <el-button type="primary" @click="showInd = false">确 认</el-button>-->
    <!--      </span>-->
    <!--    </el-dialog>-->
    <div>
      <!--            <loading _nghost-ng-cli-universal-c62="">&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;</loading>-->
    </div>
    <div class="service-panel">
      <div class="initiate-container">

        <div class="initiate-container-inner">
          <div style="color: red">
            <div><span>🔥{{ $t('热门服务') }}：</span></div>
            <div><span>{{ hot }}</span></div>
          </div>
          <div style="color: blue;margin-top: 20px"><span>{{ $t("网站持续更新升级中_欢迎同行洽谈与对接") }}</span></div>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="service-list">
        <div v-if="!mobile" class="current-score-info">
          <span>{{ $t('当前积分') }}:￥{{ this.$store.state.point }}</span><a v-on:click="replace('charge')"
            style="color:blue">({{ $t('充值') }})</a>
        </div>
        <div>
          <div class="p-button-c" v-if="mobile && batchQueryEnt">
            <el-button class="p-button" type="primary" size="mini" @click="replace('batchQueryTool')">
              {{ $t('批量查询工具') }}
            </el-button>
          </div>
          <el-input v-model="searchText" class="centered" :placeholder="$t('搜索服务')" @input="handleSearch">
            <i slot="prefix" class="el-input__icon el-icon-search" @click="handleSearch"></i>
          </el-input>

          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item :name="key" v-for="(services, key) in serviceMap" :key="key">
              <template slot="title">
                <b class="services-title">{{ key }}</b>
              </template>
              <div class="p-button-c">
                <el-button @click="jumpToCreateOrder(service.serviceId)" class="p-button"
                  v-for="(service, index) in services" :key="index">
                  <div>
                    <b style="word-break: break-word;white-space: normal;">#{{ service.serviceId }}
                      {{ service.serviceName }}</b>
                    <p>价格：￥{{ service.price }} 预计时间：{{ service.time }}</p>
                  </div>
                </el-button>
              </div>
            </el-collapse-item>


          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apiService from '@/api/apiService';
import { isMobile, replace, getCurrentUser, isWx, hasEnt } from "@/utils";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Service",
  data() {
    return {
      searchText: '',
      serviceMap: null,
      serviceList: [],
      activeNames: [],
      user: {
        advancedUser: '',
        email: ''
      },
      notice: '',
      hot: '',
      showInd: false,
      dialogWidth: 100,
      showAll: false,
      emaiShowInd: false,
      email: ''
    }
  },
  watch: {},
  computed: {
    mobile() {
      return isMobile();
    },
    batchQueryEnt() {
      return hasEnt('AP_USER_BATCH_QUERY')
    },
    id() {
      return this.$store.state.id
    },
    roleName() {
      return this.$store.state.roleName
    },
    pointsBalance() {
      return this.$store.state.point
    }
  },
  mounted() {
    // getCurrentUser()
    this.$nextTick(function () {
      // apiService.get("/all-service", {}).then(res => {
      //   this.serviceList = res.data
      //   this.serviceMap = this.groupedByParent(this.serviceList)
      // })

      // const isShowNotice =  sessionStorage.getItem('isShowNotice')
      // console.log(isShowNotice)
      // this.user = JSON.parse(sessionStorage.getItem('userInfo'))
      // if (isShowNotice == undefined){
      //   apiService.get("/notice").then(res=>{
      //     this.notice = res.data?.noticeText
      //     if(res.data?.showInd === 1) {
      //       this.showInd = true
      //       sessionStorage.setItem('isShowNotice','true')
      //       if(this.user.advancedUser === '高级用户' && !this.user.email){
      //         this.emaiShowInd = true
      //       }
      //       if(this.showInd||this.emaiShowInd){
      //         console.log('满足一个')
      //         this.showAll = true
      //       }
      //     }
      //   })
      // }else{
      //   if(this.user.advancedUser === '高级用户' && !this.user.email){
      //     this.emaiShowInd = true
      //   }
      //   if(this.showInd||this.emaiShowInd){
      //     this.showAll = true
      //   }
      // }



      // apiService.get("/hot").then(res => {
      //   console.log('公告', res.data.name)
      //   this.hot = res.data.name
      // }).catch(() =>{
      //   sessionStorage.setItem(`userInfo`, null)
      // })
    })
  },
  methods: {
    replace,
    /* eslint-disable */
    handleChange(val) {
    },
    likeCompare(x, queryString) {
      // console.log((String)(x.value).indexOf(queryString))
      return (String)(x.serviceName).indexOf(queryString) !== -1
        || (String)(x.parent).indexOf(queryString) !== -1
        || (String)(x.serviceId).indexOf(queryString) !== -1
    },
    handleSearch() {
      let filterList = this.serviceList.filter(x => this.likeCompare(x, this.searchText))
      this.serviceMap = this.groupedByParent(filterList)
      /* 搜索时全展开 */
      if (this.searchText) {
        this.activeNames = Object.keys(this.serviceMap)
      } else {
        this.activeNames = []
      }
    },
    updateEmail() {
      if (this.user.advancedUser !== '高级用户') {
        this.showAll = false
        return
      }
      if (this.user.advancedUser === '高级用户' && this.user.email !== '') {
        this.showAll = false
        return
      }
      if (this.user.advancedUser === '高级用户' && this.user.email === '' && this.email === '') {
        this.$message.error("请填写邮箱")
        return
      }
      const data = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
      if (data.test(this.email)) {
        const request = {
          email: this.email
        }
        apiService.post("/update-email", request).then(res => {
          this.$message.success("邮箱提交成功")
          this.showAll = false
          getCurrentUser()
        })
      } else {
        this.$message.error("邮箱格式不正确")
      }

    },
    groupedByParent(list) {
      return list.reduce((acc, item) => {
        const key = item.parent;
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(item);
        return acc;
      }, {})
    },
    jumpToCreateOrder(serviceId) {
      //全写传参
      if (isWx()) {
        // fixme 客户又不要下面的返回栏了
        location.replace('/create?serviceId='+serviceId)
        //this.$router.push({ path: '/create', query: { serviceId: serviceId } })
      } else {
        this.$router.push({ path: '/create', query: { serviceId: serviceId } })
      }
    }
  },

};
</script>

<style>
.hljs-center {
  text-align: center;
}
</style>

<style lang="scss" scoped>
.service-panel {
  box-shadow: 0 0 0 .2rem #00000005;
  border-radius: 10px;
  border: solid white 1px;
  background: rgb(255, 255, 255);
  margin: auto;
  width: 95%;
}

.initiate-container-inner {
  box-shadow: 0 0 0 .2rem #00000005;
  border-radius: 10px;
  background: #f3f3ff;
  float: right;
  text-align: left;
  width: 98%;
  padding: 10px 10px 10px 10px;
}

.current-score-info {
  margin-top: 20px;
  font-weight: bolder;
  width: 100%;
  text-align: left;
}


.initiate-container {
  box-shadow: 0 0 0 .2rem #00000005;
  border-radius: 10px;
  background: #696cff;
}

/* Clearfix */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


.p-button {
  margin: 0;
  //display: inline-flex;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  vertical-align: bottom;
  text-align: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  margin-right: 8px;
  margin-bottom: .5rem !important;
  color: #fff;
  background: #3B82F6;
  border: 1px solid #3B82F6;
  padding-top: .5rem;
  font-size: 13px;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  border-radius: 6px;
  font-weight: 400;
}

.p-button p {
  margin-top: .2rem;
  margin-bottom: .2rem;
}

.p-button-c {
  text-align: center;
  box-sizing: border-box;
  display: unset;
  flex-wrap: wrap;
  margin: auto;
  width: 100%;
}

.el-collapse-item .el-collapse-item__header {
  text-align: center;
}

.services-title {
  width: 100%;
  text-align: center;
}

.el-collapse-item__content {
  padding-bottom: 0;
}

.el-collapse-item:last-child {
  margin-bottom: 2px;
}

/deep/ .centered .el-input__inner {
  text-align: center;
  padding-left: 0px;
}

/deep/ .el-dialog {
  border-radius: 15px;
}

.hljs-center {
  text-align: center;
}

/deep/ .el-dialog {
  min-width: 50%;
  max-width: 80%;
  width: fit-content;
}

/deep/ .mybody img {
  max-width: 80%;
}

/deep/ .el-dialog--center .el-dialog__body {
  text-align: initial;
}
</style>
